<template>
  <el-container style="height: 100%;">
    <!-- 头 -->
    <el-header class="header">
      <el-row>
        <el-col :span="20">
          <i class="el-icon-medal"></i>
          <span style="color:#fff">{{name}}</span>
        </el-col>
        <el-col :span="4">
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <!-- 左菜单 -->
      <el-aside width="200px">
        <el-menu
          :default-active="activeIndex"
          :default-openeds="openMenu"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="reloadMenuActive"
          router
        >
          <template v-for="item in menu">
            <!-- 没有子菜单的菜单 -->
            <el-menu-item :index="item.path" :key="item.path" v-if='!item.submenu'>
              <i :class="item.icon"></i>
              {{item.title}}
            </el-menu-item>
            <!-- 有子菜单的菜单 -->
            <el-submenu :index="item.path" :key="item.path" v-else>
              <template v-slot:title>
                <i :class="item.icon"></i>{{item.title}}</template>
                <el-menu-item :index="item.path+sub.path" :key="sub.path" v-for='sub in item.submenu'>{{sub.title}}</el-menu-item>
            </el-submenu>
          </template>
          
        </el-menu>
      </el-aside>
      <!-- 右内容区 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
export default {
  data(){
    return {
      name:'前锋后台管理系统',
      menu:[
        {
          title:'首页',
          path:'/home',
          icon:'el-icon-s-home'
        },
        {
          title:'用户管理',
          path:'/user',
          icon:'el-icon-user-solid',
          submenu:[
            {
              title:'添加用户',
              path:'/add'
            },
            {
              title:'用户列表',
              path:'/list'
            }
          ]
        },
        {
          title:'商品管理',
          path:'/goods',
          icon:'el-icon-s-goods'
        },
        {
          title:'订单管理',
          path:'/order',
          icon:'el-icon-s-order'
        },
      ],
      activeIndex:'/home',
      openMenu:['/user']
    }
  },
  methods:{
    reloadMenuActive(path){
      this.activeIndex = path
    }
  }
}
</script>

<style lang="scss">
  .header{
    background: rgba(84, 92, 100,.9);
    line-height: 60px;
    .el-icon-medal{
      font-size: 40px;
      color: #fc0;
      vertical-align: middle;
    }
  }
</style>

<style lang="scss">
</style>
